
// 路由缓存
// vue-router: 为了性能考虑 在路径不发生变化的时候 会默认走缓存
// 路径对应的组件不会重新渲染 拉取数据的接口也就不会重新发送

// 解决缓存问题
// 1. 加key router-view
// 粗暴 强行破坏组件所有的缓存  适合对于性能要求不太高的场景
// 2. onBeforeRouteUpdate
// 精确控制

import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'
export function useCategory () {
  const categoryData = ref({})
  const route = useRoute() // this.$route
  async function loadData (id) {
    // id 路由参数
    // useRoute vue-router
    const res = await findTopCategory(id)
    categoryData.value = res.data.result
  }
  // 首次加载数据
  loadData(route.params.id)
  // 路由切换时重新加载数据 用的是最新的id
  onBeforeRouteUpdate((to) => {
    // 执行时机: 路由每次更新之前都执行一下
    // 每次跳转路由 就有路由更新
    // to:目标路由对象 to.params.id  最新的路由id参数
    // 每次更新路由的时候拿到to中的参数 然后重新拉取列表数据
    loadData(to.params.id)
  })

  return {
    categoryData
  }
}
